<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历操作</title>
		<!-- 针对DOM树中元素进行遍历
		 cheildren
		 parent
		 siblings()     获取所有的
		 next          获取下一个
		 prev         获取上一个
		 
		 each()     对每个元素执行指定函数
		 -->
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			.container{
				border: 10px;
				margin: 10px;
				padding: 10px;
			}
			.box{background-color: aqua;
				margin: 20px;
				padding: 20px;
				border: 5px solid #00ffff;
				width: 50px;
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
		</div>
		<button id="getcrBtn">获取直接子元素</button>
		<button id="getpbtn">直接获取父元素</button>
		<button id="eachbtn"></button>
		<button id="btn"></button>
		<button id="btn"></button>
		<button id="btn"></button>
		<script>
			$("#getcrBtn").click(function(){
				var cr=$(".container").children().css("border","10px solid red");
			});
			$("#getpBtn").click(function(){
				var cr=$(".container").parent().css("border","10px solid red");
			});
			$("#getpbtn").click(function(){
				$("#box4").prev().css({
					"width":"200px",
					"height":"200px",
					"background-color":"#ff0",
					"text-shadow":"5px 5px 10px #ff0",
					"font-size":"2em",
					"line-height":"200px",
					"text-align":"center"
				});
			});
			
			$("#eachBtn").click(function(){
				$(".box").each(function(i,e){
				$(e).text(`这是第${i}盒子`);	
				});
			});
		</script>
	</body>
</html>